<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // var xhr = new XMLHttpRequest();
    // xhr.open("get", "../data/1.txt", true);
    // xhr.send();
    // xhr.onreadystatechange = function () {
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         console.log(xhr.responseText);
    //     }
    // }


    // 前提: 服务器环境下    ajax可以请求同服务器下的其他文件 (用get请求)

    // http  超文本传输协议

    // xhr.readyState   请求的状态
    // 0  请求未初始化 (创建了请求,但是还没有配置请求相关的信息(没有调用open) ) 
    // 1  请求已经建立，但是还没有发送（配置请求相关的信息  还没有调用 send()）。
    // 2  请求已发送，正在处理中
    // 3  后端已经接收到请求,正在处理中; 通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
    // 4  后端已经接收到请求,处理完毕,返回处理的结果(1xx:还要继续 2xx:成功 3xx:跑路了  4xx:找不到路径  5xx:服务器出问题);

    // xhr.status     响应状态码 (后端处理的结果)
    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。


    // 1. 创建请求的载体  => http请求  (通过构造函数创建)
    var xhr = new XMLHttpRequest();
    console.log(xhr.readyState);   // 0

    // 2. 配置请求相关的信息   请求的方式 请求的地址  是否异步
    // xhr.open(type,url,async);
    // type 请求方式  get/post 
    // url  请求地址 
    // async 是否异步 (默认 true:异步   false:同步 同步请求不建议使用)

    xhr.open("get", "../data/1.txt", true);
    console.log(xhr.readyState);   // 1

    // 3. 发送请求
    xhr.send();
    console.log(xhr.readyState);   // 1 异步原因导致 => 且听下回分解

    // 4. 监听请求状态的改变   =>事件  页面加载时只做绑定,   xhr.readyState改变时才会执行
    xhr.onreadystatechange = function () {
        //此事件触发3次   2 3 4  => 只有4有结果
        console.log("请求状态改变:", xhr.readyState, xhr.status);

        // xhr.readyState==4   后端处理完毕 返回响应结果
        // xhr.status == 200   结果也是成功的,并得到完整的响应内容
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);  //  响应内容
        }
    }

</script>

</html>